<template>
  <el-card class="good-container">
    <template #header>
      <div class="header">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="handleAdd"
          >新增商品</el-button
        >
      </div>
    </template>
    <el-table
      v-loading="loading"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="goodsId" label="商品编号"> </el-table-column>
      <el-table-column prop="goodsName" label="商品名"> </el-table-column>
      <el-table-column prop="goodsIntro" label="商品简介"> </el-table-column>
      <el-table-column label="商品图片" width="150px">
        <template #default="scope">
          <img
            style="width: 100px; height: 100px"
            :key="scope.row.goodsId"
            :src="$filters.prefix(scope.row.goodsCoverImg)"
            alt="商品主图"
          />
        </template>
      </el-table-column>
      <el-table-column prop="stockNum" label="商品库存"> </el-table-column>
      <el-table-column prop="sellingPrice" label="商品售价"> </el-table-column>
      <el-table-column label="上架状态">
        <template #default="scope">
          <span style="color: green" v-if="scope.row.goodsSellStatus == 0"
            >销售中</span
          >
          <span style="color: red" v-else>已下架</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="100">
        <template #default="scope">
          <a
            style="cursor: pointer; margin-right: 10px"
            @click="handleEdit(scope.row.goodsId)"
            >修改</a
          >
          <a
            style="cursor: pointer; margin-right: 10px"
            v-if="scope.row.goodsSellStatus == 0"
            @click="handleStatus(scope.row.goodsId, 1)"
            >下架</a
          >
          <a
            style="cursor: pointer; margin-right: 10px"
            v-else
            @click="handleStatus(scope.row.goodsId, 0)"
            >上架</a
          >
        </template>
      </el-table-column>
    </el-table>
    <!--总数超过一页，再展示分页器-->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="changePage"
    />
  </el-card>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import axios from "@/utils/axios";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
export default {
  name: "Good",
  setup() {
    const multipleTable = ref(null);
    const router = useRouter();
    const state = reactive({
      loading: false,
      tableData: [], // 数据列表
      multipleSelection: [], // 选中项
      total: 0, // 总条数
      currentPage: 1, // 当前页
      pageSize: 10, // 分页大小
    });
    onMounted(() => {
      getGoodList();
    });
    // 获取轮播图列表
    const getGoodList = () => {
      state.loading = true;

      setTimeout(() => {
        const list = [
          {
            goodsId: 15476,
            goodsName: "123",
            goodsIntro: "123",
            goodsCategoryId: 1422,
            goodsCoverImg:
              "http://backend-api-02.newbee.ltd/upload/20220601_13102217.jpg",
            goodsCarousel: "/admin/dist/img/no-img.png",
            originalPrice: 123,
            sellingPrice: 123,
            stockNum: 123,
            tag: "123123",
            goodsSellStatus: 0,
            createUser: 0,
            createTime: "2022-06-01 13:10:36",
            updateUser: 0,
            updateTime: "2022-06-01 13:10:36",
            goodsDetailContent: null,
          },
          {
            goodsId: 15475,
            goodsName: "鸡蛋炒饭",
            goodsIntro: "懒人最爱",
            goodsCategoryId: 1331,
            goodsCoverImg:
              "http://backend-api-02.newbee.ltd/upload/20220531_22045433.jpg",
            goodsCarousel: "/admin/dist/img/no-img.png",
            originalPrice: 23,
            sellingPrice: 54,
            stockNum: 324,
            tag: "便当",
            goodsSellStatus: 1,
            createUser: 0,
            createTime: "2022-05-31 22:05:34",
            updateUser: 0,
            updateTime: "2022-06-01 11:10:11",
            goodsDetailContent: null,
          },
          {
            goodsId: 15474,
            goodsName: "hahah",
            goodsIntro: "12121",
            goodsCategoryId: 1486,
            goodsCoverImg:
              "http://backend-api-02.newbee.ltd/upload/20220531_21132562.jpg",
            goodsCarousel: "/admin/dist/img/no-img.png",
            originalPrice: 5,
            sellingPrice: 2,
            stockNum: 2,
            tag: "小猪佩奇",
            goodsSellStatus: 0,
            createUser: 0,
            createTime: "2022-05-31 21:13:52",
            updateUser: 0,
            updateTime: "2022-05-31 22:01:31",
            goodsDetailContent: null,
          },
          {
            goodsId: 15473,
            goodsName: "23",
            goodsIntro: "23",
            goodsCategoryId: 1331,
            goodsCoverImg:
              "http://backend-api-02.newbee.ltd/upload/20220531_11290043.png",
            goodsCarousel: "/admin/dist/img/no-img.png",
            originalPrice: 1,
            sellingPrice: 2,
            stockNum: 1,
            tag: "a",
            goodsSellStatus: 0,
            createUser: 0,
            createTime: "2022-05-31 11:29:13",
            updateUser: 0,
            updateTime: "2022-05-31 20:15:26",
            goodsDetailContent: null,
          },
          {
            goodsId: 15472,
            goodsName: "牛腩拌饭",
            goodsIntro: "好吃又健康",
            goodsCategoryId: 1331,
            goodsCoverImg:
              "http://backend-api-02.newbee.ltd/upload/20220531_11042748.png",
            goodsCarousel: "/admin/dist/img/no-img.png",
            originalPrice: 132,
            sellingPrice: 233,
            stockNum: 1243,
            tag: "午饭",
            goodsSellStatus: 1,
            createUser: 0,
            createTime: "2022-05-31 11:04:36",
            updateUser: 0,
            updateTime: "2022-05-31 22:02:02",
            goodsDetailContent: null,
          },
          {
            goodsId: 15471,
            goodsName: "dfsa",
            goodsIntro: "sd",
            goodsCategoryId: 1422,
            goodsCoverImg:
              "http://backend-api-02.newbee.ltd/upload/20220531_10055042.jpeg",
            goodsCarousel: "/admin/dist/img/no-img.png",
            originalPrice: 1,
            sellingPrice: 2,
            stockNum: 12,
            tag: "sd",
            goodsSellStatus: 0,
            createUser: 0,
            createTime: "2022-05-31 10:06:03",
            updateUser: 0,
            updateTime: "2022-05-31 17:57:04",
            goodsDetailContent: null,
          },
          {
            goodsId: 15470,
            goodsName: "112412",
            goodsIntro: "1",
            goodsCategoryId: 1331,
            goodsCoverImg:
              "http://backend-api-02.newbee.ltd/upload/20220530_2344410.jpg",
            goodsCarousel: "/admin/dist/img/no-img.png",
            originalPrice: 1,
            sellingPrice: 1,
            stockNum: 1,
            tag: "1",
            goodsSellStatus: 0,
            createUser: 0,
            createTime: "2022-05-30 23:44:52",
            updateUser: 0,
            updateTime: "2022-05-30 23:44:52",
            goodsDetailContent: null,
          },
          {
            goodsId: 15469,
            goodsName: "蒸饺",
            goodsIntro: "玩儿推哦",
            goodsCategoryId: 1354,
            goodsCoverImg:
              "http://backend-api-02.newbee.ltd/upload/20220530_20580464.png",
            goodsCarousel: "/admin/dist/img/no-img.png",
            originalPrice: 2,
            sellingPrice: 2,
            stockNum: 9,
            tag: "美食",
            goodsSellStatus: 0,
            createUser: 0,
            createTime: "2022-05-30 20:58:24",
            updateUser: 0,
            updateTime: "2022-05-30 20:58:24",
            goodsDetailContent: null,
          },
          {
            goodsId: 15468,
            goodsName: "44",
            goodsIntro: "44",
            goodsCategoryId: 1388,
            goodsCoverImg:
              "http://backend-api-02.newbee.ltd/upload/20220530_17074560.jpg",
            goodsCarousel: "/admin/dist/img/no-img.png",
            originalPrice: 44,
            sellingPrice: 44,
            stockNum: 44,
            tag: "44",
            goodsSellStatus: 0,
            createUser: 0,
            createTime: "2022-05-30 17:08:01",
            updateUser: 0,
            updateTime: "2022-05-31 16:35:49",
            goodsDetailContent: null,
          },
          {
            goodsId: 15467,
            goodsName: "商品",
            goodsIntro: "测试",
            goodsCategoryId: 1345,
            goodsCoverImg:
              "http://backend-api-02.newbee.ltd/upload/20220530_16535883.png",
            goodsCarousel: "/admin/dist/img/no-img.png",
            originalPrice: 12,
            sellingPrice: 12,
            stockNum: 12,
            tag: "测试",
            goodsSellStatus: 0,
            createUser: 0,
            createTime: "2022-05-30 16:54:17",
            updateUser: 0,
            updateTime: "2022-06-01 10:00:55",
            goodsDetailContent: null,
          },
        ];
        state.tableData = list;
        state.total = 2664;
        state.currentPage = 267;
        state.loading = false;
      }, 2000);
    };
    const handleAdd = () => {
      router.push({ path: "/add" });
    };
    const handleEdit = (id) => {
      router.push({ path: "/add", query: { id } });
    };
    // 选择项
    const handleSelectionChange = (val) => {
      state.multipleSelection = val;
    };
    const changePage = (val) => {
      state.currentPage = val;
      getGoodList();
    };
    const handleStatus = (id, status) => {
      axios
        .put(`/goods/status/${status}`, {
          ids: id ? [id] : [],
        })
        .then(() => {
          ElMessage.success("修改成功");
          getGoodList();
        });
    };
    return {
      ...toRefs(state),
      multipleTable,
      handleSelectionChange,
      handleAdd,
      handleEdit,
      getGoodList,
      changePage,
      handleStatus,
    };
  },
};
</script>

<style scoped>
.good-container {
  min-height: 100%;
}
.el-card.is-always-shadow {
  min-height: 100% !important;
}
</style>